import * as React from 'react';
import { forwardRef } from 'react';
import PositioningManagement from '../positioning-management/positioning-management';
import TaskTracking from '../task-tracking/task-tracking';
import './index.scss';

export interface EmployeeManagementRightProps {
  className?: string;
  style?: React.CSSProperties;
  width?: number | string;
  height?: number | string;
  /**
   * 组件ID
   */
  componentId?: string;
  
  // PositioningManagement 组件的属性
  positioningManagement?: {
    title?: string;
    englishTitle?: string;
    positioningRecords?: Array<{
      key: string;
      employee: string;
      location: string;
      time: string;
      callInfo: string;
    }>;
  };
  
  // TaskTracking 组件的属性
  taskTracking?: {
    title?: string;
    englishTitle?: string;
    taskStatistics?: {
      totalTasks: number;
      completedTasks: number;
      completionRate: string;
    };
    taskRecords?: Array<{
      key: string;
      taskName: string;
      assignee: string;
      status: string;
      priority: string;
      deadline: string;
    }>;
  };

  __designMode?: boolean;
}

const EmployeeManagementRight = forwardRef<HTMLDivElement, EmployeeManagementRightProps>(({
  className = '',
  style = {},
  width,
  height,
  componentId,
  positioningManagement = {},
  taskTracking = {},
  __designMode,
  ...otherProps
}, ref) => {
  const combinedClassName = `employee-management-right ${className}`.trim();
  const customStyle: React.CSSProperties = { ...style };

  // 只在设计模式下应用宽高属性，避免覆盖CSS缩放
  if (__designMode && width) {
    customStyle.width = typeof width === 'number' ? `${width}px` : width;
  }
  if (__designMode && height) {
    customStyle.height = typeof height === 'number' ? `${height}px` : height;
  }

  return (
    <div 
      ref={ref} 
      className={combinedClassName} 
      style={customStyle}
      id={componentId}
      {...otherProps}
    >
      {/* 上半部分：定位管理组件 */}
      <div className="employee-management-right__positioning-section">
        <PositioningManagement
          title={positioningManagement.title || "定位管理"}
          englishTitle={positioningManagement.englishTitle || "Positioning management"}
          positioningRecords={positioningManagement.positioningRecords || []}
          {...positioningManagement}
        />
      </div>

      {/* 下半部分：任务追踪组件 */}
      <div className="employee-management-right__task-section">
        <TaskTracking
          title={taskTracking.title || "任务追踪"}
          englishTitle={taskTracking.englishTitle || "Task Tracking"}
          taskStatistics={taskTracking.taskStatistics || {
            totalTasks: 278,
            completedTasks: 78,
            completionRate: '30%',
          }}
          taskRecords={taskTracking.taskRecords || []}
          {...taskTracking}
        />
      </div>
    </div>
  );
});

EmployeeManagementRight.displayName = 'EmployeeManagementRight';

export default EmployeeManagementRight;
